﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Js层拖动 - www.codefans.net</title>
<style>
*{margin:0;padding:0;}
#zhezhao{
	width:100%;
	height:100%;
	background:#f00;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:9999;
	position:absolute;
	top:0;
	left:0;
	display:none;
}
#div2{
	width:200px;
	height:200px;
	position:relative;
	background:#EEEEEE;
	border:1px solid #f00;
}
#div1{
	width:15px;
	height:15px;
	background:#99CC00;
	position:absolute;
	right:0px;
	bottom:0px;
	cursor:nw-resize;
	overflow:hidden;
	font-size:12px;
	text-align:center;
	line-height:15px;
	color:#FFFFFF;
	float:right;
	z-index:3;
}
#right{
	width:15px;
	height:100%;
	background:#f00;
	float:right;
	position:absolute;
	right:0;
	top:0;
	cursor:e-resize;
	overflow:hidden;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:1;
}
#bottom{
	width:100%;
	height:15px;
	background:#f00;
	position:absolute;
	left:0;
	bottom:0;
	cursor:n-resize;
	overflow:hidden;
	filter:alpha(opacity:0);
	opacity:0;
	z-index:1;
}
#div2 p{
	padding:10px;
	line-height:24px;
	font-size:13px;
	text-indent:24px;
	color:#996600;
}
#div2 h2{
	width:100%;
	height:25px;
	line-height:25px;
	font-size:14px;
	background:#CC9900;
	color:#FFFFFF;
	text-indent:15px;
	cursor:move;
	overflow:hidden;
}
</style>
<script type="text/javascript">
    var exp = /(?:http:\/\/)?(?:(\w+)\.)?(?:(\w+)\.)(\w+)/g;
    var match = exp.exec("htt);

	
</script>
</head>
<body>
<div id="div2">
	<div style="width:100%; height:100%; overflow:hidden;">
	<h2>完美的拖拽</h2>
	<p>体验不错的JavaScript网页拖动，除了拖动，还可拖动放大，像Windows窗口一样被放大或缩小，只要按住层的右下角，就可以收放自如的放大或缩小。想使用的朋友，可将代码里的Js封装成类，从外部引入想必更公道些。\'</p>
	<div id="right"></div>
	<div id="div1">拖</div>
	<div id="bottom"></div>
	</div>
</div>
<div id="zhezhao"></div>
</body>
</html></div>
		</div><!-- /content -->

		<div class="dede_pages"><ul class="pagelist"><li><a>共2页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a href='#'>1</a></li><li><a href='8546_2.html'>2</a></li><li><a href='8546_2.html'>下一页</a></li></ul></div><!-- /pages -->
		
		<div class="hot mt1"> 
			<dl class="tbox light">
			<dt class='light' style="padding-left:10px;"><strong>您可能感兴趣的与“ <a href='/tags.php?/%B2%E3%CD%CF%B6%AF/' title='层拖动' target='_blank'>层拖动</a> ”相关的文章还有：</strong></dt> 
			<dd class='light'><ul class="c3 ico2" style="padding-left:15px;"><li><a href="/html/wangyetexiao/yemianzonghe/20130815/16922.html" title="Js网页版五角星礼花-VML技术代码" target="_blank">Js网页版五角星礼花-VML技术代码</a><span>2013-08-15 21:55</span></li>
<li><a href="/html/wangyetexiao/qitatexiao/20130810/16909.html" title="jQuery高亮显示网页关键词" target="_blank">jQuery高亮显示网页关键词</a><span>2013-08-10 20:50</span></li>
<li><a href="/html/wangyetexiao/youxiyule/20130810/16908.html" title="原生JS贪食蛇网页代码" target="_blank">原生JS贪食蛇网页代码</a><span>2013-08-10 20:50</span></li>
<li><a href="/html/wangyetexiao/youxiyule/20130810/16905.html" title="JS网页游戏平台-推箱子、坦克大战、猜数字、赛车等代码" target="_blank">JS网页游戏平台-推箱子、坦克大战、猜数字、赛车等代码</a><span>2013-08-10 20:50</span></li>
<li><a href="/html/wangyetexiao/qitatexiao/20130810/16904.html" title="CSS3网页开关-Switches代码" target="_blank">CSS3网页开关-Switches代码</a><span>2013-08-10 20:50</span></li>
<li><a href="/html/wangyetexiao/qitatexiao/20130810/16895.html" title="拖动鼠标画出方框，JS鼠标选区代码" target="_blank">拖动鼠标画出方框，JS鼠标选区代码</a><span>2013-08-10 20:50</span></li>
<li><a href="/html/wangyetexiao/qitatexiao/20130810/16894.html" title="HTML5 css3圆角菱形带动画的网页选项卡代码" target="_blank">HTML5 css3圆角菱形带动画的网页选项卡代码</a><span>2013-08-10 20:50</span></li>
<li><a href="/html/wangyetexiao/yemianzonghe/20130803/16881.html" title="使用网页OBJECT对象天生三个面不停旋转的立体动画" target="_blank">使用网页OBJECT对象天生三个面不停旋转的立体动画</a><span>2013-08-03 10:34</span></li>
<li><a href="/html/wangyetexiao/qitatexiao/20130803/16878.html" title="网页文字动画效果，调用OBJECT实现" target="_blank">网页文字动画效果，调用OBJECT实现</a><span>2013-08-03 10:34</span></li>
<li><a href="/html/wangyetexiao/qitatexiao/20130803/16876.html" title="点击时文本输入框变长-网页殊效" target="_blank">点击时文本输入框变长-网页殊效</a><span>2013-08-03 10:34</span></li>
</ul></dd> 
			</dl> 
		</div>
		
		<div class="hot mt1"><script src="/js/mymoney/mymoney_23.js" language="javascript"></script></div>
		<div class="handle">
			<div class="context"><ul><li>上一篇：<a href='/html/wangyetexiao/yemianzonghe/20101215/8472.html'>JavaScript 取得当前页面的URL网址参数</a> </li><li>下一篇：<a href='/html/wangyetexiao/yemianzonghe/20101225/8548.html'>Js文字章节跳转功能的模拟代码</a> </li></ul></div>
			<div class="actbox">
				<ul>
					<li id="act-fav"><a href="/plus/stow.php?aid=8546" target="_blank">收藏</a></li>
					<li id="act-err"><a href="/plus/erraddsave.php?aid=8546&title=完美的JavaScript网页拖动" target="_blank">挑错</a></li>
					<li id="act-pus"><a href="/plus/recommend.php?aid=8546" target="_blank">推荐</a></li>
					<li id="act-pnt"><a href="#" onClick="window.print();">打印</a></li>
				</ul>
			</div><!-- /actbox -->
		</div><!-- /handle -->
	<!-- /viewbox -->
	</div>
<div class="clear"></div>
<div class="picnews2">
  <dl class="tbox light">
	<dt class='light'><strong>最新图文</strong></dt>
	<dd class='light'>
	<div class="infiniteCarousel">
	<div class="wrapper"><ul><li><a href="/html/PSjiaocheng/zhaopianchuli/20130610/16860.html" title="Photoshop给草地上的美女加上柔美的蓝黄色" target="_blank"><img src='/uploads/allimg/130610/1Q0301438-0-lp.jpg' border='0' width='128' height='96' alt='Photoshop给草地上的美女加上柔美的蓝黄色'><span class="title">Photoshop给草地上的美女加上柔</span></a></li>
<li><a href="/html/PSjiaocheng/yihuajiemu/20130610/16859.html" title="PhotoShop超强合成正在飞奔的水马" target="_blank"><img src='/uploads/allimg/130610/1Q0112630-0-lp.jpg' border='0' width='128' height='96' alt='PhotoShop超强合成正在飞奔的水马'><span class="title">PhotoShop超强合成正在飞奔的水</span></a></li>
<li><a href="/html/PSjiaocheng/zhaopianchuli/20130610/16858.html" title="Photoshop给树林美女加上唯美的小清新淡黄色" target="_blank"><img src='/uploads/allimg/130610/1P9505F1-0-lp.jpg' border='0' width='128' height='96' alt='Photoshop给树林美女加上唯美的小清新淡黄色'><span class="title">Photoshop给树林美女加上唯美的</span></a></li>
<li><a href="/html/PSjiaocheng/wenzitexiao/20130610/16857.html" title="Photoshop制作创意的液化火焰字" target="_blank"><img src='/uploads/allimg/130610/1P93T545-0-lp.jpg' border='0' width='128' height='96' alt='Photoshop制作创意的液化火焰字'><span class="title">Photoshop制作创意的液化火焰字</span></a></li>
</ul></div>
	</div>
	</dd>
  </dl>
</div>
</div>
<div class="pright_article">
	<div>
	  <dl class="tbox">
			<dt><strong>赞助商链接</strong></dt>
			<dd><script type="text/javascript">			        /*300*250pic，创建于2010-9-2*/var cpro_id = 'u181273';</script><script type="text/javascript" src="http://cpro.baidu.com/cpro/ui/c.js"></script></dd>
		</dl>
	</div>   
	
	<div class="hot mt1">
		<dl class="tbox light">
			<dt class='light'><strong>热点内容</strong></dt>
			<dd class='light'><ul class="c1 ico2"><li><a href="/html/wangyetexiao/yemianzonghe/20101130/8338.html" title="自写一个翻书的Js效果,jquery-1.4.2.min.js" target="_blank">自写一个翻书的Js效果,jquery-1.4.2.min.js</a></li>
<li><a href="/html/wangyetexiao/yemianzonghe/20100918/1176.html" title="左右框架隐藏显示/打开/封闭的JS代码" target="_blank">左右框架隐藏显示/打开/封闭的JS代码</a></li>
<li><a href="/html/wangyetexiao/yemianzonghe/20100920/2000.html" title="一个生成歌词LRC的简易小工具" target="_blank">一个生成歌词LRC的简易小工具</a></li>
<li><a href="/html/wangyetexiao/yemianzonghe/20100926/2018.html" title="JavaScript检测浏览器是否开启了Cookie功能" target="_blank">JavaScript检测浏览器是否开启了Cookie功能</a></li>
<li><a href="/html/wangyetexiao/yemianzonghe/20100918/1301.html" title="腾讯在线状态客服最新代码" target="_blank">腾讯在线状态客服最新代码</a></li>
</ul></dd>
		</dl>
	</div>
	
	<div class="hot mt1">
		<dl class="tbox light">
			<dt class='light'><strong>最新视频</strong></dt>
			<dd class='light'><ul class="videobox"><script type='text/javascript' src='http://www.21edu8.com/js.js'></script></ul></dd>
		</dl>
	</div>
	
	<div class="mt1">
	  <dl class="tbox">
			<dt><strong>赞助商链接</strong></dt>
			<dd><ul id="google300250"><script src="/js/mymoney/mymoney_1.js" language="javascript"></script></ul></dd>
		</dl>
	</div>
	<div class="hot mt1"><script src="/js/mymoney/mymoney_17.js" language="javascript"></script></div>
</div><!-- /pright -->
</div>
<div class="w980 center mt1 clear" style="height:90px;"><script type="text/javascript">                                                            alimama_pid = "mm_14432656_2079336_8886683"; alimama_titlecolor = "0000FF"; alimama_descolor = "000000"; alimama_bgcolor = "FFFFFF"; alimama_bordercolor = "E6E6E6"; alimama_linkcolor = "008000"; alimama_bottomcolor = "FFFFFF"; alimama_anglesize = "0"; alimama_bgpic = "0"; alimama_icon = "0"; alimama_sizecode = "15"; alimama_width = 950; alimama_height = 90; alimama_type = 2; </script> <script src="http://a.alimama.cn/inf.js" type="text/javascript"> </script></div>
<div class="footer w980 center mt1 clear">
	<p class="powered">Powered by <a href="http://pc.21edu8.com" title="计算机平面设计,3D设计,计算机编程等在线教程以及最新建站源码下载！" target="_blank"><strong>21edu8<span>.com</span></strong></a> © 2010-2012</p>
	<p class="copyright">苏ICP备08117497号 Copyright © 2010-2012 21edu8.com 星火视频 版权所有<br />本站部分文章转载自互联网，若侵犯到您的权益请来信告之，本站核实后即刻删除！  <script src="http://s85.cnzz.com/stat.php?id=292908&web_id=292908" language="JavaScript"></script></p>
</div>
<script src="/js/mymoney/mymoney_24.js" language="javascript"></script>
<div id="google336280ad" style="display:none"><script src="/js/mymoney/mymoney_7.js" language="javascript"></script></div>
<script type="text/javascript">    if (document.getElementById("google336280") != null) { document.getElementById("google336280").innerHTML = document.getElementById("google336280ad").innerHTML; }</script>

<div id="google46815ad" style="display:none"><script src="/js/mymoney/mymoney_2.js" language="javascript"></script></div>
<script type="text/javascript">    if (document.getElementById("google46815") != null) { document.getElementById("google46815").innerHTML = document.getElementById("google46815ad").innerHTML; }</script>
</body>
</html>